Toast Notifications তৈরি করা

Web Development - বুটস্ট্রাপ (Bootstrap 5) - Bootstrap 5 এর Offcanvas এবং Toasts |

Toast Notifications হচ্ছে ছোট, স্বল্প সময়ের জন্য প্রদর্শিত মেসেজ এলিমেন্ট যা সাধারণত পেজের নিচে বা উপরে আনার জন্য ব্যবহার করা হয়। এটি সাধারণত ব্যবহারকারীদের কোনো অ্যাকশন বা কার্যকলাপের উপর প্রতিক্রিয়া জানাতে সাহায্য করে, যেমন সফলভাবে কোনো কাজ সম্পন্ন হয়েছে বা ত্রুটি ঘটেছে। Bootstrap 5 এ Toast কম্পোনেন্ট খুব সহজে ব্যবহারযোগ্য এবং এর অনেক কাস্টমাইজেশন অপশন রয়েছে।

Toast Notifications তৈরি করার জন্য প্রস্তুতি

Bootstrap Toast কম্পোনেন্টের HTML কোড:
প্রথমে আপনি একটি toast তৈরি করতে পারবেন যেটি আপনার পেজে ব্যবহারকারীকে প্রদর্শন করতে চান।
```
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap 5</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      আপনার কাজ সফলভাবে সম্পন্ন হয়েছে!
    </div>
  </div>
</div>
```
এখানে:
- position-fixed bottom-0 end-0 p-3 ক্লাস ব্যবহার করা হয়েছে টোস্টটিকে স্ক্রীনের নীচে এবং ডানদিকে স্থাপন করার জন্য।
- aria-live="assertive" এবং aria-atomic="true" এটিকে অ্যাক্সেসিবিলিটি মানদণ্ডে রাখতে সাহায্য করে।
টিন্ডার বা বাটন ব্যবহার করে Toast প্রদর্শন:
আপনি JavaScript ব্যবহার করে টোস্ট কন্ট্রোল করতে পারেন। উদাহরণস্বরূপ, একটি বাটন ক্লিক করার মাধ্যমে টোস্ট প্রদর্শন করা যেতে পারে।
```
<button class="btn btn-primary" id="liveToastBtn">Show Toast</button>
```

Toast প্রদর্শন করার জন্য JavaScript কোড

এখন আপনি Toast প্রদর্শন করতে JavaScript কোড যুক্ত করতে পারেন:

<script>
   var toastEl = document.getElementById('liveToast');
   var toast = new bootstrap.Toast(toastEl); // Bootstrap 5 Toast Object
   var toastBtn = document.getElementById('liveToastBtn');

   toastBtn.addEventListener('click', function () {
     toast.show(); // Toast Show Method
   });
</script>

এখানে:

new bootstrap.Toast(toastEl) ব্যবহার করে টোস্ট এলিমেন্টকে একটি টোস্ট অবজেক্টে রূপান্তর করা হয়েছে।
toast.show() কল করার মাধ্যমে টোস্টটি প্রদর্শিত হবে।

Toast এর কাস্টমাইজেশন

বুটস্ট্র্যাপ ৫ এ Toast এর অনেক কাস্টমাইজেশন অপশন রয়েছে, যেমন:

Delay: আপনি টোস্টের প্রদর্শন সময়ের জন্য একটি ডিলে নির্ধারণ করতে পারেন। এটি animation প্রপার্টি দিয়ে কাস্টমাইজ করা যায়।

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
    <div class="toast-header">
      <strong class="me-auto">Success</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Your action was successful.
    </div>
  </div>
</div>

এখানে, data-bs-delay="5000" দিয়ে ৫ সেকেন্ডের জন্য টোস্টটি প্রদর্শিত হবে।

Auto-hide: বুটস্ট্র্যাপে টোস্টগুলো ডিফল্টভাবে অটো-হাইড হয়, কিন্তু আপনি যদি এটি কন্ট্রোল করতে চান তবে data-bs-autohide অ্যাট্রিবিউট ব্যবহার করতে পারেন।
```
<div class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <strong class="me-auto">Custom Toast</strong>
  </div>
  <div class="toast-body">
    You can close this manually!
  </div>
</div>
```
কাস্টম স্টাইল (Style Customization): আপনি CSS ব্যবহার করে টোস্টের ব্যাকগ্রাউন্ড কালার, টেক্সট কালার, অথবা অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।
```
<style>
  .toast {
    background-color: #28a745; /* Green color */
    color: white;
  }
</style>
```

Toast এর Events হ্যান্ডলিং

Bootstrap 5 Toast কম্পোনেন্টটি ইভেন্টও সাপোর্ট করে। আপনি টোস্টের Show, Shown, Hide, এবং Hidden ইভেন্টগুলি ট্র্যাক করতে পারেন।

<script>
  var toastEl = document.getElementById('liveToast');
  var toast = new bootstrap.Toast(toastEl);

  toastEl.addEventListener('show.bs.toast', function () {
    console.log('Toast is about to be shown');
  });

  toastEl.addEventListener('shown.bs.toast', function () {
    console.log('Toast has been shown');
  });

  toastEl.addEventListener('hide.bs.toast', function () {
    console.log('Toast is about to be hidden');
  });

  toastEl.addEventListener('hidden.bs.toast', function () {
    console.log('Toast has been hidden');
  });
</script>

এখানে, show.bs.toast এবং shown.bs.toast ইভেন্ট ব্যবহার করে আপনি টোস্টের শো এবং শো হওয়ার পরে কোনো অ্যাকশন নিতে পারেন।

সারাংশ

Bootstrap 5 এর Toast Notifications তৈরি করা খুব সহজ এবং দ্রুত। এটি ব্যবহারকারীদের কার্যকলাপের উপর প্রতিক্রিয়া জানাতে সহায়ক। আপনি এগুলি HTML, CSS এবং JavaScript দিয়ে কাস্টমাইজ করে টোস্টের অ্যানিমেশন এবং টাইমিং নিয়ন্ত্রণ করতে পারেন।

Content added By

Md Azizur Rahman

Toast Notifications তৈরি করা

Toast Notifications তৈরি করা